<template>
  <div :class="{'container':isBorder=='true'}">
      <wxc-minibar :title="title"
         :background-color="bgColor"
         :leftButton="leftButton"
         :right-button="rightButton"
         :text-color="color"
         :right-text="rightText"
         @wxcMinibarLeftButtonClicked="minibarLeftButtonClick"
         @wxcMinibarRightButtonClicked="minibarRightButtonClick">   
      </wxc-minibar>
  </div>
</template>
<script>
  import { WxcMinibar } from 'weex-ui';
  export default {
    data:function(){
        return {
            borderClass:''
        }
    },
    components: { WxcMinibar },
    props:{
        title:{
            type: String,
            default :'桃宝宝'
        },
        bgColor:{
           type : String,
           default:'#ffffff'
        },
        color : {
            type : String,
            default :'#f59800'
        },
        rightText:{
          type:String,
          default :''
        },
        leftButton:{
          type:String
        },
        rightButton:{
          type:String
        },
        isBorder:{
          type:String,
          default:'true'
        }
    },
    mounted:function(){
    },
    methods: {
        minibarLeftButtonClick () {
        },
        minibarRightButtonClick () {
          this.modal.toast({ 'message': 'click rightButton!', 'duration': 1 });
        }
    }
  };
</script>
<style>
    .container{
        border-bottom-width: 2px;
        border-bottom-style: solid;
        border-bottom-color: #f3f3f3;
    }
</style>